<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-12-31 09:14:26
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-01-20 08:33:08
-->
<template>
  <div>
    <el-dialog
      title="新建托管"
      :visible.sync="dialog.newQuaShow"
      width="30%"
      @close="newQuaClose"
      custom-class="dialogClass"
      :close-on-click-modal="false"
    >
      <el-form
        :model="quaForm"
        ref="quaForm"
        :rules="quaRules"
        label-width="80px"
        :inline="false"
        size="normal"
        v-if="dialog.newQuaShow"
      >
        <el-form-item label="服务商" prop="serviceId">
          <el-select v-model="quaForm.serviceId" placeholder="请选择服务商">
            <el-option
              v-for="item in fwOptions"
              :key="item.serviceId"
              :label="item.serviceName"
              :value="item.serviceId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证书" prop="qualStr">
          <el-input
            v-model="quaForm.qualStr"
            @focus="add"
            placeholder="+ 添加"
            style="width: 230px"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="dialog.newQuaShow = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </span>
    </el-dialog>
    <div class="modalIndex">
      <el-dialog
        title="关联证书模块"
        :visible.sync="relationShow"
        class="module"
        width="70%"
        :close-on-click-modal="false"
      >
        <cert-info ref="qualiInfo" v-if="relationShow"></cert-info>
        <span slot="footer">
          <el-button @click="relationShow = false">取消</el-button>
          <el-button type="primary" @click="strSubnit">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import certInfo from "./certInfo/index.vue";
import { getServices, trusteeship } from "@/api/enCert/certDeposit";
export default {
  components: {
    certInfo,
  },
  props: {
    dialog: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      relationShow: false,
      quaForm: {
        serviceId: "",
        qualStr: "",
      },
      fwOptions: [],
      quaRules: {
        serviceId: [
          {
            required: true,
            message: "请选择服务商",
            trigger: "change",
          },
        ],
        qualStr: [
          {
            required: true,
            message: "请选择资质",
          },
        ],
      },
    };
  },
  created() {
    this.getServices();
  },
  methods: {
    newQuaClose() {
      this.quaForm = {
        serviceId: "",
        qualStr: "",
      };
      this.qualIds = [];
    },
    strSubnit() {
      this.quaForm.qualStr = this.$refs.qualiInfo.Str;
      this.qualIds = this.$refs.qualiInfo.ids;
      console.log(this.quaForm.qualStr, this.qualIds);
      this.relationShow = false;
    },
    onSubmit() {
      this.$refs.quaForm.validate((valid) => {
        if (!valid) return;
        var fd = new FormData();
        fd.append("serviceId", this.quaForm.serviceId);
        fd.append("certIds", JSON.stringify(this.qualIds));
        trusteeship(fd).then((res) => {
          this.$message.success(res.msg);
          this.dialog.newQuaShow = false;
          this.$parent.getList();
        });
      });
    },
    // 获取服务商
    getServices() {
      getServices({
        type: 3,
      }).then((res) => {
        this.fwOptions = res.data;
      });
    },
    // 添加资质
    add() {
      this.relationShow = true;
    },
  },
};
</script>

<style lang="less" scoped>
.module {
  // z-index: 2068 !important;
  /deep/ .el-dialog__body {
    height: 700px;
    overflow: auto;
  }
}
.modalIndex {
  z-index: 99999;
}
</style>